<template>
  <div class="shop-cart">
    <van-sticky>
      <van-nav-bar title="购物车" >
        <template #right>
          <van-icon name='delete-o' size='22' @click="del"></van-icon>
        </template>
      </van-nav-bar>
    </van-sticky>
    <template v-if='articleList.length != 0'>
      <van-checkbox-group v-model='shop' ref="shop">
        <van-row v-for='shopItem in articleList' :key='shopItem.title'>
          <van-col span='22' offset='1'>
            <van-cell>
              <template #title>
                <van-card 
                  :price='shopItem.price' 
                  thumb="https://img01.yzcdn.cn/vant/cat.jpeg" 
                  :title="shopItem.title" 
                num='1' >
                  <template #desc>
                    <div class="my-ellipsis">
                      {{shopItem.synopsis}}
                    </div>
                  </template>
                </van-card>
              </template>
              <template #right-icon>
                <van-checkbox :name='shopItem'></van-checkbox>
              </template>
            </van-cell>
          </van-col>
        </van-row>
      </van-checkbox-group>
    </template>
    <template v-else>
      <van-empty image="error" description="暂无数据" />
    </template>
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model='flag' @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { request } from 'network/request'

export default {
  name: 'ShopCart',
  created() {
    this.getArticleDate()
  },
  data() {
    return {
      shop: [],
      articleList: [],
      flag: false,
    }
  },
  computed: {
    totalPrice() {
      return (this.shop.reduce((total, element) => {
        return total + parseFloat(element.price)
      }, 0)) * 100
    },
  },
  methods: {
    onSubmit() {
      console.log('submit')
    },
     checkAll() {
       if(this.flag) {
        this.$refs.shop.toggleAll(true)
       } else {
        this.$refs.shop.toggleAll()
       }
      //  this.flag = !this.flag
    },
    getArticleDate() {
      request({
        url: 'article/data',
        method: 'post'
      }).then((res) => {
        this.articleList = res.data
        // console.log(res.data[0])
      })
      .catch(err => console.log(err))
    },
    del() {
      this.$toast.fail('功能未实现')
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.shop-cart {
  padding-bottom: 106px;
}

.van-submit-bar {
  bottom: 46px;
}

.van-cell {
  border-radius: 15px;
  margin-top: 15px;
}

.my-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 180px;
}
</style>
